<template>
  <div class="right_module">
    <div class="right_top">
      <div class="right_top_a">
        <div class="nurse"></div>
      </div>
      <div class="nurse_Information">
        <div class="InformationA text_overflow"> 护士长：{{ docInfo.headNurse || '-' }} </div>
        <!-- <div class="InformationA text_overflow"> 护士长：肖护士长 </div> -->
        <div class="InformationB text_overflow">
          值班护士：<span class="name">{{ docInfo.nurseName || '-' }}</span>
        </div>
        <div class="InformationC text_overflow">
          值班医生：<span>{{ docInfo.docotrName || '-' }}</span>
        </div>
      </div>
    </div>
    <div class="right_button">
      <div class="list_text">设备告警信息</div>
      <div class="list_data" v-if="list.length">
        <Swiper
          :observer="true"
          :observeParents="false"
          direction="vertical"
          slidesPerView="auto"
          :watchSlidesProgress="true"
          :modules="modules"
          loop
          :autoplay="{
            delay: 5000,
            disableOnInteraction: false,
          }"
          class="warning_content_ul mySwiper"
        >
          <Swiper-slide
            v-for="(item, id) in list.filter(
              (item) => item.warnType !== 'Humidity' && item.warnType !== 'Temperature',
            )"
            :key="item.id"
            class="a_a"
            @click="realTime(item)"
          >
            <div class="a_b">
              <div class="a_t">
                <div class="a_title">
                  <span style="white-space: nowrap" class="tiu"
                    >{{ item.description }} ({{ item.count }}条)
                  </span>
                  <div class="a_r" v-if="item.count > 0">
                    <span style="color: #ff4cad" class="a_g">待处理</span>
                  </div>
                </div>
                <div class="a_c">
                  <div class="a_v">
                    {{ item.expandAttr?.Beds && item.expandAttr?.Beds.join(',') }}
                    <!-- <span v-for="itemJ in  item.expandAttr?.Beds">{{ itemJ || ' ' }}</span> -->
                  </div>
                </div>
              </div>
              <!-- 图片 -->
            </div>
          </Swiper-slide>
          <p class="no_data" v-if="list.length == 0">暂无告警</p>
        </Swiper>
      </div>
    </div>
    <a-modal
      v-model:visible="visible"
      title="实时告警"
      @ok="visible = false"
      width="50%"
      okText="知道了"
    >
      <div class="alarm_content">
        <div class="alarm_top">
          <h3>{{ dataSource.length }}条告警未处理</h3>
          <a-button @click="delBatchWar" :disabled="selectedRowKeys.length < 1"
            >批量解除告警</a-button
          >
        </div>
        <a-table
          :rowKey="(record) => record.id"
          :dataSource="dataSource"
          :columns="columns"
          :scroll="{ y: 400 }"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'operation'">
              <a @click="delBatchWar(record)" style="color: red">立即处理</a>
            </template>
          </template>
        </a-table>
      </div>
    </a-modal>

    <a-modal
      v-model:visible="delvisible"
      title="解除告警"
      :wrap-style="{ overflow: 'hidden' }"
      dialogClass="alarm_model"
      @ok="handleOk"
    >
      <div class="content">
        <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 12 }"
          :wrapper-col="{ span: 12 }"
          autocomplete="off"
          style="width: 400px"
        >
          <a-form-item label="解决办法">
            <rwSelect
              style="width: 100%"
              code="DISCHARGE_WARNS_METHOD"
              :addOption="[{ typeName: '其他', typeCode: '其他' }]"
              codevalue="typeName"
              :xhrParams="{ data: 'data' }"
              placeholder="请选择解决办法"
              :allowClear="false"
              size="mini"
              :value="formState.handlingMethod"
              @change="(e) => (formState.handlingMethod = e)"
            />
          </a-form-item>
          <a-form-item label="解决办法" v-if="formState.handlingMethod == '其他'">
            <a-input placeholder="请输入解决办法" v-model:value="formState.handlingMethods" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, watch } from 'vue';
  import { hisDoctorInfo } from '@/api/modular/his/index';
  import { columns } from './slider.data';
  import * as api from './slider.api';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import 'swiper/css';
  import { useSuccess } from '@/hooks/rw/handleSuccess';
  import rwSelect from '/@/components/rw/dictSelect.vue';
  import { Autoplay, Pagination, Navigation } from 'swiper/modules';
  import SwiperApi from 'swiper';
  import { videoStore } from '@/store/modules/video.ts';

  const videoStoreIns = videoStore();
  const { rhandleSuccess } = useSuccess();
  export default defineComponent({
    components: { rwSelect, Swiper, SwiperSlide },
    props: {
      list: {
        type: Array,
        default: () => {
          return [];
        },
      },
      uniqueData: {
        type: Array,
        default: () => {
          return [];
        },
      },
      wardId: {
        type: String,
        default: '',
      },
      deviceCategory: {
        type: String,
        default: '',
      },
    },
    setup(props, ctx) {
      const { list, wardId, deviceCategory, uniqueData } = toRefs(props);
      const docInfo = ref({ docotrName: '', headNurse: '', nurseName: '' });
      const visible = ref(false);
      const delvisible = ref(false);
      //console.log('infosds', wardId);
      watch(wardId, (n) => {
        getDoctor(n);
      });
      watch(list, (n) => {
        list.value = n;
      });

      const queryParams = ref({
        pageIndex: 1,
        limit: 10,
        keyWord: undefined,
        type: '',
      });

      const tabulation: any = ref([]);
      const dataSource = ref([]);
      const formState: any = ref({ handlingMethod: '已知晓' });
      const nowWarType = ref('');
      const warnType = ref('');
      const obtainalarm = (e) => {};

      const realTime = (row) => {
        visible.value = true;
        formState.value.handlingMethods = '';
        let basicWarnTypes = row.basicWarnTypes.join(',');
        nowWarType.value = basicWarnTypes;
        warnType.value = row.warnType;
        getWarningList(basicWarnTypes, row.warnType);
        // router.push({ path: "/alarm/real", query: { warType } });
      };

      const getWarningList = (WarnTypeSubCodes, warnType) => {
        api
          .listpage({
            WarnTypeSubCodes,
            pageSize: 999,
            BinderTypes: deviceCategory.value,
            WarnTypes: warnType,
          })
          .then((res) => {
            dataSource.value = res.data.entities.map((item) => {
              return { ...item };
            });
          });
      };

      const getDoctor = async (wardId) => {
        let res = await hisDoctorInfo({ wardId });
        let info = res.data;
        console.log('infosds', wardId);
        docInfo.value = {
          docotrName: info?.headDoctor.map((item) => item.staffName).join(','),
          nurseName: info?.nurse.map((item) => item.staffName).join(','),
          headNurse: info?.headNurse.map((item) => item.staffName).join(','),
        };
      };

      const state = reactive<{
        selectedRowKeys: any[];
        loading: boolean;
      }>({
        selectedRowKeys: [], // Check here to configure the default column
        loading: false,
      });

      const onSelectChange = (selectedRowKeys: Key[]) => {
        state.selectedRowKeys = selectedRowKeys;
      };
      const deleteCamera = (tableList) => {
        for (let item of tableList) {
          for (let itemJ of uniqueData.value) {
            if (item.areaId === itemJ.areaId) {
              videoStoreIns.del(itemJ.deviceId);
            }
          }
        }
      };
      const delBatchWar = (row?) => {
        getWarningList(nowWarType.value, warnType.value);
        // let findItem = uniqueData.value.find((ele: any) => {
        //   return ele.areaId === row.areaId
        // })
        formState.value.handlingMethods = '';
        formState.value.handlingMethod = '已知晓';
        row && (formState.value.id = row.id);
        delvisible.value = true;
      };
      const getTargetFiled = (ids) => {
        const targetArr = [];
        dataSource.value.forEach((item) => {
          if (ids.includes(item.id)) {
            targetArr.push(item);
          }
        });
        return targetArr;
      };
      async function handleOk(record) {
        let ids = state.selectedRowKeys;
        const targetIds = getTargetFiled(ids.length ? ids : [formState.value.id]);
        const list = deleteCamera(targetIds);
        let data = {
          ids: ids.length ? ids : [formState.value.id],
          handlingMethod: formState.value.handlingMethods || formState.value.handlingMethod,
        };
        let res = await api.del(data);
        delvisible.value = false;
        state.selectedRowKeys = [];
        rhandleSuccess(res, () => {
          getWarningList(nowWarType.value, warnType.value);
          // videoStoreIns.removeAll()
        });
      }

      return {
        queryParams,
        tabulation,
        list,
        docInfo,
        visible,
        delvisible,
        dataSource,
        columns,
        formState,
        modules: [Autoplay, Pagination, Navigation],
        handleOk,
        ...toRefs(state),
        delBatchWar,
        onSelectChange,
        obtainalarm,
        realTime,
      };
    },
  });
</script>
<!-- .ant-modal {
  z-index: 9999 !important;
} -->
<style lang="scss">
  .list_text {
    .ant-select-dropdown {
      background-color: transparent !important;
    }

    .ant-select-item-option-content {
      flex: none !important;
    }
  }

  .alarm_content {
    padding: 10px;

    .alarm_top {
      display: flex;
      justify-content: space-between;

      h3 {
        font-size: 19px;
      }
    }
  }
</style>

<style lang="scss" scoped>
  .text_overflow {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .right_module {
    width: 20%;
    height: 100%;
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 15px;

    ::v-deep .ant-select-selector {
      margin-top: 20px;
      font-size: 15px;
      text-align: center;
    }

    .right_top {
      display: flex;
      align-items: center;
      width: 100%;
      height: 25%;
      background-image: url('/src/assets/ruijin/images/border.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;

      .right_top_a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30%;
        height: 100%;

        .nurse {
          width: 55px;
          height: 60px;
          background-image: url('/src/assets/ruijin/images/nurse.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }

      .nurse_Information {
        display: flex;
        flex-flow: column;
        justify-content: center;
        width: 65%;
        height: 100%;

        .InformationA {
          margin-bottom: 10px;
          font-size: 16px;
        }

        .InformationB {
          display: flex;
          flex-wrap: wrap;
          font-size: 16px;
          margin-bottom: 10px;
          .name {
            margin-right: 10px;
          }
        }
        .InformationC {
          display: flex;
          flex-wrap: wrap;
          font-size: 16px;

          .name {
            margin-right: 10px;
          }
        }
      }
    }

    .right_button {
      width: 100%;
      height: 73%;
      margin-top: 10px;
      background-image: url('/src/assets/ruijin/images/frame.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      cursor: pointer;

      .list_text {
        padding-top: 20px;
        color: #01c3e8;
        font-size: 18px;
        text-align: center;
      }

      .list_data {
        width: 100%;
        height: 85%;
        overflow: auto;

        .warning_content_ul {
          width: 100%;
          height: 100%;

          .no_data {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            color: #ddd;
            font-size: 18px;
          }

          .a_a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 12%;
            margin-top: 1%;
            background-color: rgb(255 255 255 / 10%);

            .a_b {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              font-size: 14px;

              .a_t {
                width: 100%;
                height: 100%;

                .a_title {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  width: 100%;
                  padding: 0 15px;

                  .tiu {
                    display: block;
                    // width: 80%;
                    flex: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                }
              }

              .a_r {
                .bracelet_picture_a {
                  display: inline-block;
                  width: 20px;
                  height: 26px;
                  margin: 0;
                  margin-top: 10px;
                  margin-right: 20px;
                  background-image: url('/src/assets/ruijin/images/minibracelet.png');
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
                }

                .a_g {
                  font-size: 12px;
                }
              }
            }

            .a_c {
              @keyframes carousel {
                0% {
                  transform: translateX(100%);
                }

                100% {
                  transform: translateX(-100%);
                }
              }

              overflow: hidden;
              border: 0 solid #ccc;
              font-size: 13px;
              white-space: nowrap;

              .a_v {
                display: revert-layer;
                height: 20px;
                margin-left: 10px;
                padding-top: 5px;
                animation: carousel 10s linear infinite;
              }
            }
          }
        }

        .a_k {
          width: 100%;
          height: 100%;
          font-size: 18px;
          text-align: center;
        }
      }
    }
  }
</style>
